<script lang="ts" setup>
import { showToast } from 'vant';
import { getCurrentInstance } from 'vue'
import { ref, reactive, onMounted } from 'vue';
const { proxy } = getCurrentInstance() as any

const showBtn = ref(true)
const showShare = ref(false)
const showLike = ref(false)
const videoBtn = ref(null)

const options = [
    [
        { name: '微信', icon: 'wechat' },
        { name: '朋友圈', icon: 'wechat-moments' },
        { name: '微博', icon: 'weibo' },
        { name: 'QQ', icon: 'qq' },
    ],
    [
        { name: '复制链接', icon: 'link' },
        { name: '分享海报', icon: 'poster' },
        { name: '二维码', icon: 'qrcode' },
        { name: '小程序码', icon: 'weapp-qrcode' },
    ],
]

const changeShow = () => {
    showShare.value = true
}

const changeLike = () => {
    showLike.value = !showLike.value
}

const onSelect = (option) => {
    showToast(option.name);
    showShare.value = false;
}

const video = reactive({
    videoList: []
})

const getVideoApi = () => {
    proxy.$http.get('public/video.json').then(({data})=>{
        video.videoList = data.feeds
        console.log(data);
    })
}

const videoPlay = (n:number) => {
    if(videoBtn.value[n].paused){
        videoBtn.value[n].play()
        showBtn.value = false
        console.log(showBtn.value);
        
    }else{
        videoBtn.value[n].pause()
        showBtn.value = true
    }
}

onMounted(() => {
    getVideoApi()
})
</script>

<template>
    <div class="video-view">
        <van-swipe style="height: 618px;" vertical :show-indicators="false">
            <van-swipe-item v-for="(v,index) in video.videoList" :key="index">
                <div class="video-box">
                    <video ref="videoBtn" class="myVideo" :src="v.video.url" @click="videoPlay(index)"></video>

                    <img class="play-btn" src="../assets/imgs/video/1WO.png" v-show="showBtn">
                    <div class="zan-btn" @click="changeLike" v-show="showLike">
                        <img src="../assets/imgs/video/zan.png">
                    </div>
                    <div class="zan-btn" @click="changeLike" v-show="!showLike">
                        <img src="../assets/imgs/video/hvZ.png">
                    </div>
                    <div class="m-btn">
                        <img src="../assets/imgs/video/m.png">
                    </div>
                    <div class="f-btn" @click="changeShow">
                        <img src="../assets/imgs/video/P2W.png">
                    </div>

                    <div class="con">
                        <div class="con-title">{{ v.title }}</div>
                    </div>
                </div>
            </van-swipe-item>
        </van-swipe>
        <van-share-sheet v-model:show="showShare" title="立即分享给好友" :options="options" @select="onSelect"/>
    </div>
</template>

<style lang="scss" scoped>
.video-view{
    width: 375px;
    height: 618px;
    background-color: rgba(0,0,0,0.9);
    overflow: hidden;
    margin: 0 auto;

    .video-box{
        position: relative;

        .myVideo{
            width: 375px;
        }
        .play-btn{
            width: 16vw;
            height: 16vw;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-8vw,-8vw);
            z-index: 99;
        }

        .zan-btn{
            width: 12vw;
            height: 12vw;
            position: absolute;
            right: 4vw;
            bottom: 34vh;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 50%;
            background-color: rgba(0,0,0,0.5);

            img{
                width: 7vw;
                height: 7vw;
            }
        }
        .m-btn{
            width: 12vw;
            height: 12vw;
            position: absolute;
            right: 4vw;
            bottom: 22vh;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 50%;
            background-color: rgba(0,0,0,0.5);

            img{
                width: 6vw;
                height: 6vw;
            }
        }
        .f-btn{
            width: 12vw;
            height: 12vw;
            position: absolute;
            right: 4vw;
            bottom: 10vh;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 50%;
            background-color: rgba(0,0,0,0.5);
            z-index: 999;

            img{
                width: 7vw;
                height: 7vw;
            }
        }
        
        .con{
            width: 100vw;
            height: 12vh;
            color: #ffffff;
            position: absolute;
            left: 0;
            bottom: 5vh;
            background: linear-gradient(transparent,rgba(0,0,0,0.8));
            
            .con-title{
                width: 80vw;
                font-size: 18px;
                line-height: 7vw;
                padding-left: 4vw;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                overflow: hidden;
            }
        }
    }
    
}
</style>